<template>
  <div>
      <h3>
      computed
      </h3>
      <!-- 计算属性是一个属性，写法是一个函数 要有返回值 -->
      <!-- 必须定义在computed节点中 -->
      <!-- 必须是一个 function必须有返回值-->
      <!-- 不能被当作方法来调用，当成属性 -->
      <input type="text" name="" id="" v-model="name1">+
      <input type="text" name="" id="" v-model="name2">=
      <span>{{total}} </span>
  </div>
</template>

<script>
export default {
data() {
    return {
        name1:1,
        name2:2
    }
},
computed: {
    //计算属性的变量不能和data中的数据重名
    total() {
        return this.name1-this.name2 
    }
},
}
</script>

<style>

</style>